<template>
    <div class="portfolio-summary-card">
        <div class="title">Assets Overview</div>
        <div class="asset-box">
            <div class="left-box">
                <!-- <div class="k">Total Value</div> -->
                <!-- <div class="v">${{ totle_value.toFixed(2) }}</div> -->
                <div class="balance-box">
                    <div class="value">{{ totle_value.toFixed(2) }}</div>
                    <div class="danwei">USD</div>
                </div>
            </div>
            <div class="right-box">
                <!-- <div class="k" :style="`color: ${ change_value >= 0 ? 'var(--positive-number-color)' : 'var(--negative-number-color)' }`">Today's Change</div> -->
                <div class="v" :style="`color: ${ change_value >= 0 ? 'var(--positive-number-color)' : 'var(--negative-number-color)' }`">{{ addUnit(change_value.toFixed(2)) }}</div>
                <div class="v" :style="`color: ${ change_value >= 0 ? 'var(--positive-number-color)' : 'var(--negative-number-color)' }`">{{ change_rate }}%</div>
            </div>
        </div>
        <div class="btn-box">
            <div class="deposit-btn btn" @click="routerTo('/deposit/deposit')">
                <div>Deposit</div>
            </div>
            <div class="withdraw-btn btn" @click="routerTo('/deposit/withdraw')">
                <div>Withdraw</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { onMounted } from 'vue';
import { totle_value, change_value, change_rate, assetService } from '@/service/asset.js';
import { addUnit } from '@/utils/price.js';
import { routerTo } from '@/utils/jump';

onMounted(() => {
    assetService.getStockOrderList();
});
</script>

<style scoped lang="less">
.portfolio-summary-card {
    box-sizing: border-box;
    width: 100%;
    padding: 3vw;
    border-radius: 3vw;
    background-color: #fff;
    box-shadow: 0 0 1.5vw rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    gap: 3vw;

    .title {
        font-size: 3.5vw;
        font-weight: 700;
        color: var(--text-color);
    }

    .asset-box {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left-box, .right-box {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 1vw;

            .k {
                font-size: 3.2vw;
                color: var(--text-light-color);
            }

            .v {
                font-size: 3.5vw;
                font-weight: 700;
            }
        }

        .left-box {
            .balance-box {
                display: flex;
                align-items: baseline;
                gap: 2vw;

                .value {
                    font-size: 5.5vw;
                    font-weight: 700;
                }

                .danwei {
                    font-size: 3.5vw;
                    font-weight: 500;
                }
            }
        }

        .right-box {
            text-align: right;
        }
    }

    .btn-box {
        display: flex;
        gap: 2vw;

        .btn {
            flex: 1;
            height: 8vw;
            border-radius: 1.5vw;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;

            &>div {
                padding-left: 5vw;
                font-size: 3vw;
                font-weight: 600;
                position: relative;

                &::before, &::after {
                    --size: 2.5vw;
                    --border-width: 0.1vw;
                    content: '';
                    display: block;
                    position: absolute;
                    top: 50%;
                    left: 0;
                }

                &::after {
                    width: calc(var(--size) * 1.414);
                    height: var(--border-width);
                    background-color: #fff;
                    transform: translate(-0.5vw, -50%) rotate(-45deg);
                }
            }
        }

        .deposit-btn {
            background-color: var(--positive-number-color);

            &>div {
                &::before {
                    width: var(--size);
                    height: var(--size);
                    border-left: var(--border-width) solid #fff;
                    border-bottom: var(--border-width) solid #fff;
                    transform: translateY(-50%);
                }
            }
        }

        .withdraw-btn {
            background-color: var(--negative-number-color);
            
            &>div {
                &::before {
                    width: var(--size);
                    height: var(--size);
                    border-top: 0.1vw solid #fff;
                    border-right: 0.1vw solid #fff;
                    transform: translateY(-50%);
                }
            }
        }
    }
}
</style>